<template>
    <van-popup class="modal-transparent" v-model:show="show" :close-on-click-overlay="false" teleport="body">
        <div class="modal-container">
            <div class="header"></div>
            <div class="main">
                <div class="title"></div>
                <div class="sub-title">{{vueState.countryInfo.currencySymbol}}<span>{{amount}}</span> withdrawal</div>
                <div class="content">Invite friends & earn <span>{{vueState.countryInfo.currencySymbol}}100</span> per day</div>
            </div>
            <div class="footer" @click="invite">
                <div class="button"><span>To invite</span></div>
                <div class="hand"></div>
            </div>
        </div>
        <div class="modal-close">
            <div class="icon" @click="close"></div>
        </div>
    </van-popup>
</template>
<script>
import {inject} from 'vue'
export default {
    props:['show','amount'],
    setup(props,ctx) {
        const vueState = inject('vueState')
        const close = ()=>{
            ctx.emit('update:show',false)
        }
        const invite = ()=> {
            ctx.emit('invite')
        }
        return {
            vueState,
            close,
            invite
        }
    }
}
</script>
<style lang="less" scoped>

.modal{
    &-close{
        display: flex;
        justify-content:center;
        .icon{
            margin-top:.5rem;
            height: .36rem;
            width: .36rem;
            background: url(../../assets/images/Modal/modal_close_white.png) no-repeat center;
            background-size: contain;
        }
    }
    &-container{
        .header{
            height: 1.69rem;
            width:2.08rem;
            background: url(../../assets/images/Modal/withdraw_success_top.png) no-repeat center;
            background-size: contain;
            margin: 0 auto;
        }
        .main{
            margin-top: .12rem;
            .title{
                height: .28rem;
                width: 3.14rem;
                background: url(../../assets/images/Modal/withdraw_success_text.png) no-repeat center;
                background-size: contain;
            }
            .sub-title{
                font-size: .28rem;
                font-weight: 700;
                line-height: .33rem;
                color:#53F276;
                text-align: center;
                margin-top: .06rem;
            }
            .content{
                margin-top: .36rem;
                padding: 0 .46rem;
                font-size: .17rem;
                font-weight: 700;
                line-height: .2rem;
                text-align: center;
                color:#FEFBE9;
                >span{
                    color:#53F276;
                }
            }
        }
        .footer{
            position: relative;
            margin-top: .24rem;
            .hand{
                right: 0.46rem;
                top: 0.23rem;
                position: absolute;
                width: .6rem;
                height: .6rem;
                background: url(../../assets/images/hand.png) no-repeat center;
                background-size: contain;
                animation: hand 1s infinite ease;
            }
            .button{
                margin: 0 auto;
                width: 1.8rem;
                height: .46rem;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color:#FF4E70;
                border-radius: .5rem;
                box-shadow: 0px .14rem .27rem 0px rgba(254,23,76,0.25); 
                &>span{
                    color: white;
                    font-weight: 500;
                    font-size: .17rem;
                }
                
            }
        }
    }
}
@keyframes hand {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
        transform: translate(-60%,-10%);
    }
}
</style>